<script lang="ts" setup>
import { ref } from 'vue'

// 页面配置
definePage({
  style: {
    navigationBarTitleText: '登录记录查询',
    backgroundColor: '#FFFFFF',
    navigationBarTextStyle: 'black',
  },
})

// 登录记录数据类型
interface LoginRecord {
  id: string
  loginTime: string
  device: string
  ip: string
  location: string
  status: 'success' | 'failed'
}

// 登录记录列表
const loginRecords = ref<LoginRecord[]>([
  {
    id: '1',
    loginTime: '2024-01-15 09:30:45',
    device: 'Chrome / Windows 10',
    ip: '192.168.1.1',
    location: '北京市',
    status: 'success',
  },
  {
    id: '2',
    loginTime: '2024-01-14 18:23:11',
    device: 'Safari / iOS 16',
    ip: '192.168.1.2',
    location: '上海市',
    status: 'success',
  },
  {
    id: '3',
    loginTime: '2024-01-13 14:15:32',
    device: 'Firefox / macOS',
    ip: '192.168.1.3',
    location: '广州市',
    status: 'failed',
  },
  {
    id: '4',
    loginTime: '2024-01-12 10:08:59',
    device: 'Edge / Windows 11',
    ip: '192.168.1.4',
    location: '深圳市',
    status: 'success',
  },
  {
    id: '5',
    loginTime: '2024-01-11 22:17:41',
    device: 'Chrome / Android 13',
    ip: '192.168.1.5',
    location: '杭州市',
    status: 'success',
  },
])

// 是否显示加载中
const isLoading = ref(false)

// 加载更多数据
async function loadMoreData() {
  if (isLoading.value)
    return

  isLoading.value = true
  try {
    // 模拟API请求
    await new Promise(resolve => setTimeout(resolve, 1000))

    // 这里可以添加加载更多数据的逻辑
    console.log('加载更多数据')
  }
  catch (error) {
    uni.showToast({
      title: '加载失败，请重试',
      icon: 'none',
    })
  }
  finally {
    isLoading.value = false
  }
}

// 获取状态显示文本和样式
function getStatusDisplay(status: 'success' | 'failed') {
  if (status === 'success') {
    return {
      text: '登录成功',
      color: 'text-green-500',
      bgColor: 'bg-green-50',
    }
  }
  else {
    return {
      text: '登录失败',
      color: 'text-red-500',
      bgColor: 'bg-red-50',
    }
  }
}

// 页面加载时执行
onLoad(() => {
  console.log('登录记录页面已加载')
  // 可以在这里从服务器加载用户的登录记录
})
</script>

<template>
  <view class="login-history-container min-h-screen bg-slate-50">
    <!-- 说明提示 -->
    <view class="tips-section mx-4 mt-3 rounded-lg bg-slate-100 px-4 py-3 shadow-sm">
      <text class="text-xs text-slate-600">
        最近30天内的登录记录，最多显示50条
      </text>
    </view>

    <!-- 登录记录列表 -->
    <view class="history-list mt-3 px-4">
      <view
        v-for="record in loginRecords"
        :key="record.id"
        class="record-item mb-3 rounded-lg bg-white p-4 shadow-md transition-all duration-200 hover:shadow-lg"
      >
        <view class="mb-3 flex items-center justify-between">
          <view class="flex items-center">
            <view class="mr-3 h-10 w-10 flex items-center justify-center rounded-full bg-primary/10">
              <i class="i-solar:laptop-broken text-lg text-primary" />
            </view>
            <text class="text-base text-slate-900 font-medium">{{ record.device }}</text>
          </view>
          <view class="rounded-full px-3 py-1 text-xs font-medium" :class="[getStatusDisplay(record.status).bgColor, getStatusDisplay(record.status).color]">
            {{ getStatusDisplay(record.status).text }}
          </view>
        </view>
        <view class="rounded-md bg-slate-50 p-3 text-xs text-slate-500 space-y-1.5">
          <view class="flex justify-between">
            <text class="text-slate-600">登录时间：</text>
            <text class="text-slate-800 font-medium">{{ record.loginTime }}</text>
          </view>
          <view class="flex justify-between">
            <text class="text-slate-600">登录IP：</text>
            <text class="text-slate-800 font-medium">{{ record.ip }}</text>
          </view>
          <view class="flex justify-between">
            <text class="text-slate-600">登录地点：</text>
            <text class="text-slate-800 font-medium">{{ record.location }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 加载更多按钮 -->
    <view class="load-more-section mb-6 mt-4 px-4">
      <button
        v-if="loginRecords.length >= 5"
        class="w-full border border-slate-200 rounded-lg bg-white py-3 text-sm text-slate-600 font-medium shadow-sm transition-colors active:bg-slate-100 hover:bg-slate-50"
        :disabled="isLoading"
        @click="loadMoreData"
      >
        {{ isLoading ? '加载中...' : '加载更多' }}
      </button>
      <view v-else class="py-4 text-center text-xs text-slate-400">
        没有更多记录了
      </view>
    </view>
    <!-- 安全提示 -->
    <view class="security-tips-section mx-4 mb-6 rounded-lg bg-white px-4 py-3 shadow-sm">
      <view class="flex items-start">
        <i class="i-solar:shield-check-broken mr-2 mt-0.5 flex-shrink-0 text-lg text-blue-500" />
        <text class="text-xs text-slate-600 leading-relaxed">
          如发现非本人操作的登录记录，请立即修改密码并联系客服
        </text>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.login-history-container {
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  padding-bottom: 20px;
}

.record-item {
  transition: all 0.3s ease;
}

.record-item:active {
  transform: scale(0.98);
  opacity: 0.9;
}

button {
  line-height: normal;
  font-weight: 500;
}

button::after {
  border: none;
}

button:disabled {
  opacity: 0.6;
  transform: none !important;
}

// 图标动画效果
.record-item i {
  transition: transform 0.3s ease;
}

.record-item:active i {
  transform: rotate(5deg);
}

// 响应式调整
@media (min-width: 768px) {
  .login-history-container {
    max-width: 540px;
    margin: 0 auto;
    padding: 20px;
  }

  .tips-section,
  .security-tips-section {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .history-list {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

// 文本样式优化
.text-xs {
  line-height: 1.5;
}
</style>
